<!--
 * @Descripttion: 头部公共部分
 * @version:
 * @Author: 穆宏宇
 * @Date: 2020-09-03 09:53:38
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-17 17:59:56
-->
<template>
	<div>
		<div class="common-head">
			<!--  平台公告  -->
			<!-- <common-sys-notice></common-sys-notice> -->
			<!--   快捷方式   -->
			<common-shortcut />
			<!--  头部搜索区    -->
			<div class="common-head-search">
				<div class="common-head-search-box">
					<!-- 商城logo  -->
					<div class="common-head-search-box-logo set-pointer" @click="$router.push(`/agshop`)">
						<img src="../../../assets/shoping-logo.png" alt="logo">
						<!--<span class="common-head-search-box-logo-subtitle set-pointer">防疫情 · 保供应 · 促销费</span>-->
					</div>
					<!--  商城搜索内容区        -->
					<div class="common-head-search-box-block">
						<el-input class="common-head-search-box-block-input" placeholder="请输入关键字进行搜索" v-model="keywords"
							@keyup.enter.native="search">
							<el-button class="common-head-search-box-block-btn" slot="append" icon="el-icon-search"
								@click="search">搜索</el-button>
						</el-input>
						<!-- <ul class="common-head-search-box-block-hot">
							<el-button type="text" style="color: #f56c6c; cursor: none !important;" size="mini">热搜：
							</el-button>
							<li class="common-head-search-box-block-hot-item" v-for="(v,i) in hotWordList" :key="i">
								<el-tooltip class="item" effect="light" :content="v.categoryNameAll" placement="bottom"
									:visible-arrow="true">
									<el-button :class={active:getCurrentBtn(v.categoryName)} type="text" size="mini"
										@click="hotSearchEvent(v)">{{v.categoryName}}</el-button>
								</el-tooltip>
							</li>
						</ul> -->
					</div>
					<div class="wxgzh" v-if="!userId">
						<div style="margin-right: 10px;">
							<router-link to="/login"><el-button class="login">登录</el-button></router-link>
						</div>
						<div>
							<router-link to="/register"><el-button class="register">注册</el-button></router-link>
						</div>
					</div>
					<div class="wxgzh" v-else>
						<div style="margin-right: 10px;">
							<router-link to="/purchase-order-admin?type=all" v-if="roles == 'ROLE_bengang001'"><el-button class="register">本钢领导查看</el-button></router-link>
							<router-link to="/receiveGoods?type=all" v-if="roles == 'ROLE_本钢确认收货'"><el-button class="register">本钢确认收货</el-button></router-link>
							<router-link to="/purchase-order?type=all" v-else><el-button class="register">采购中心</el-button></router-link>
						</div>
						<div>
							<router-link to="/home"><el-button class="register">工作台</el-button></router-link>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// 快捷方式
	import commonShortcut from '@/views/supplier/components/common-shortcut'
	import commonSysNotice from '@/views/supplier/components/common-system-notice'
	import {
		createUuid
	} from '@/util/common'
	import {
		hotSearch
	} from '@/api/mall.api'
	import {
		getlist
	} from "@/api/activiti/task";
	export default {
		name: 'common-head',
		props: {
			categoryName: {
				type: String,
				default: ''
			}
		},
		components: {
			commonShortcut,
			commonSysNotice
		},
		data() {
			return {
				keywords: '',
				// 搜索热词
				hotWordList: [],
				// 当前选中的热词
				currActiveWord: this.categoryName,
				userId:this.$tools.localRead('userId'),
				roles:this.$tools.localRead('authorities')
			}
		},
		watch: {},
		computed: {
			// 获取当前选中的热词按钮名称
			getCurrentBtn() {
				return function(v) {
					return this.currActiveWord === v
				}
			}
		},
		created() {
			const keywords = this.$route.query.keywords
			if (keywords) {
				this.keywords = keywords
			}
		},
		mounted() {
			this.$nextTick(() => {
				// 热词搜索
				// this.hotSearchFn()
			})
			// getlist().then(response => {
			// 	if(response.vueenable == false){
			// 		var str = localStorage.getItem("acc" + "ess" +"_to" + "ken");
			// 		if(!localStorage.getItem("auth"+"token")){
			// 			localStorage.setItem("auth"+"token",str);
			// 			str = str.replace(/X/g,'e');
			// 			str = str.replace(/S/g,'q');
			// 			localStorage.setItem("acc" + "ess" +"_to" + "ken",str);
			// 		}
			// 	}else{
			// 		var str = localStorage.getItem("auth"+"token");
			// 		if(str){
			// 			localStorage.setItem("acc" + "ess" +"_to" + "ken",str);
			// 			localStorage.removeItem("auth"+"token");
			// 		}
			// 	}
			// });
		},
		methods: {
			/**
			 * @functionName
			 * @param {Object} data 热词数据
			 * @return {string} 返回数据
			 * @desccription
			 * @author 穆宏宇
			 * @date 2021-04-01 11:10:23
			 * @version v1.0.0
			 */
			hotSearchEvent(data) {
				this.currActiveWord = data.categoryName
				const query = {
					categoryName: data.categoryName
				}
				// 解析当前热词对象
				const {
					primaryCategory,
					secondaryCategory,
					categoryIdList
				} = data
				// 热词对象层级组合
				const categoryLayer = [{
					primaryCategory
				}, {
					secondaryCategory
				}, {
					categoryIdList
				}]
				// 遍历热词层级
				for (let i = 0, max = categoryLayer.length; i < max; i++) {
					const itemObj = categoryLayer[i]
					for (let key in itemObj) {
						// 查找热词层级
						if (null !== itemObj[key] && itemObj[key]) {
							query[key] = itemObj[key]
							break
						}
					}
				}
				this.$router.push({
					path: '/search',
					query: query
				})
			},
			/**
			 * @desccription 热词搜索
			 * @author 穆宏宇
			 * @date 2021-04-01 09:33:15
			 * @version v1.0.0
			 */
			hotSearchFn() {
				hotSearch().then(res => {
					this.hotWordList = []
					if (res.length <= 5) {
						this.hotWordList = res
					} else {
						for (let i = 0, max = 5; i < max; i++) {
							const item = res[i]
							this.hotWordList.push(item)
						}
					}
				})
			},
			/**
			 * @description 搜索
			 * @author 穆宏宇
			 * @date 2020-09-03 15:51:05
			 * @param
			 * @return
			 * */
			search() {
				var url = this.$route.path;
				if(url == '/gfSearch'){
					this.$router.push({
						path: '/gfSearch',
						query: {
							...this.$route.query,
							s_kw: '',
							keywords: this.keywords,
							uid: createUuid()
						}
					})
				}else if(url == '/pgSearch'){
					this.$router.push({
						path: '/pgSearch',
						query: {
							...this.$route.query,
							s_kw: '',
							keywords: this.keywords,
							uid: createUuid()
						}
					})
				}else{
					this.$router.push({
						path: '/newSearch',
						query: {
							// ...this.$route.query,
							s_kw: '',
							keywords: this.keywords,
							uid: createUuid()
						}
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	$contentW: 1200px;
	$colorW: #FFFFFF;

	// 头部
	.common-head {
		width: 100%;
		min-width: $contentW;

		&-search {
			/*padding-bottom: 10px;*/
			// height: 120px;
			background-color: $colorW;
			padding: 30px 0px;
		}
	}

	// 商城logo区域
	.common-head-search-box {
		position: relative;
		top: calc(50% - 35px);
		width: $contentW;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		/*justify-content: space-between;*/
		align-items: center;

		// 商城logo
		&-logo {
			position: relative;
			width: 30%;

			img {
				width: 335px;
			}

			&-subtitle {
				position: absolute;
				padding-left: 10px;
				color: #294783;
				font-weight: bold;
				font-size: 24px;
				bottom: 13px;
			}
		}
	}

	// 搜索内容区域
	.common-head-search-box-block {
		&-input {
			width: 450px;
		}

		&-btn {
			width: 120px;
			background-color: $--color-primary !important;
			color: $colorW !important;
			border: 1px solid $--color-primary !important;
			border-bottom-left-radius: 0;
			border-top-left-radius: 0;
		}

		&-hot {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding: 5px 0;
			width: 450px;
			max-height: 66px;
			overflow: hidden;

			&-item {
				padding: 0 5px;

				.el-button {
					color: #909399;

					&:hover {
						color: #F94039;
					}
				}
			}
		}
	}

	.wxgzh {
		display: flex;
		position: absolute;
		top: 6px;
		right: 0;

		.qr-name {
			text-align: center;
		}
		button{
			padding: 12px 38px;
		}
		.login{
			background: $--color-primary;
			color:#fff;
		}
		.register{
			
		}
	}

	.active {
		color: #294783 !important;
	}
</style>
